<template>
    <div id="FAPAIO">
      <div id="p_top_box">
        <div class="top_l">
          <label for="">
            <span>订单提交日期：</span>
            <Row>
              <Col span="12">
                <DatePicker v-model="Data.timeOne" type="daterange" :options="options2" placement="bottom-start" placeholder="请输入搜索区间" style="width: 200px;height:36px"></DatePicker>
              </Col>
            </Row>
          </label>
          <label for="">
            <span>
              开票状态：
            </span>
            <Select v-model="Data.PiaoStatus" clearable style="width:200px">
              <Option v-for="item in PiaoList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </label>
        </div>
        <div class="top_r">
          <span>搜索</span>
          <span>清空</span>
        </div>
      </div>
      <div>
        <Table border :columns="columns7" :data="data6"></Table>
      </div>
      <div style="text-align: center;margin-top:22px;">
        <Page :total="20" show-elevator @on-change="ChangePage" @keyup.enter="ChangePage"/>
      </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      options2: {
        shortcuts: [
          {
            text: "本周",
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              return [start, end];
            }
          },
          {
            text: "本月",
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              return [start, end];
            }
          }
        ]
      },
      Data: {
        timeOne: "",
        model8: "",
        payState: "",
        PiaoStatus: ""
      },
      PiaoList: [
        {
          value: "全部",
          label: "全部"
        },
        {
          value: "等待支付",
          label: "等待支付"
        },
        {
          value: "交易成功",
          label: "交易成功"
        },
        {
          value: "交易关闭",
          label: "交易关闭"
        },
        {
          value: "退款成功",
          label: "退款成功"
        }
      ],
      // ==============
      columns7: [
        {
          title: "发票申请ID",
          align: "center",
          key: "id",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "person"
                }
              }),
              h("strong", params.row.id)
            ]);
          }
        },
        {
          title: "申请提交时间",
          align: "center",
          width: 180,
          key: "time"
        },
        {
          title: "消费类型",
          align: "center",
          key: "moneytype"
        },
        {
          title: "发票金额",
          align: "center",
          key: "money"
        },
        {
          title: "开具类型",
          align: "center",
          key: "Ktype"
        },
        {
          title: "发票类型",
          align: "center",
          key: "Ftype"
        },
        {
          title: "发票抬头",
          align: "center",
          key: "Fp"
        },
        {
          title: "申请状态",
          align: "center",
          key: "status"
        },
        {
          title: "操作",
          key: "action",
          width: 100,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      // this.show(params.index);
                      console.log(params);
                      window.open(`#/FpXiangq?id=${params.row.id}`);
                    }
                  }
                },
                "查看详情"
              )
            ]);
          }
        }
      ],
      data6: [
        {
          id: "1232",
          time: "2018-15-23 15:22:36",
          moneytype: "充值订单",
          money: 18.265,
          Ktype: "个人",
          Ftype: "普通发票",
          Fp: "里打好",
          status: "0"
        },
        {
          id: "1232",
          time: "2018-15-23 15:22:36",
          moneytype: "充值订单",
          money: 18.265,
          Ktype: "个人",
          Ftype: "普通发票",
          Fp: "里打好",
          status: "0"
        },
        {
          id: "1232",
          time: "2018-15-23 15:22:36",
          moneytype: "充值订单",
          money: 18.265,
          Ktype: "个人",
          Ftype: "普通发票",
          Fp: "里打好",
          status: "0"
        },
        {
          id: "1232",
          time: "2018-15-23 15:22:36",
          moneytype: "充值订单",
          money: 18.265,
          Ktype: "个人",
          Ftype: "普通发票",
          Fp: "里打好",
          status: "0"
        }
      ]
    };
  },
  computed: {
    Switches() {
      return this.$store.state.comm.XIAOFEI;
    }
  },
  watch: {
    Switches(val) {
      if (val == 4) {
        this.init();
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      console.log("this", "4");
    },
    ChangePage(index) {
      console.log("val", index);
    }
  }
};
</script>
<style scoped>
#FAPAIO {
  padding: 0 16px;
  height: 100%;
}
#p_top_box {
  overflow: hidden;
  /* height: 100%; */
}
.top_l {
  float: left;
  width: 86%;
  overflow: hidden;
}
.top_l label {
  margin: 6px 0;
  float: left;
  margin-right: 12px;
  height: 41px;
}
.top_l label span {
  line-height: 32px;
  vertical-align: middle;
  float: left;
  font-size: 14px;
}
.top_r {
  float: left;
  width: 14%;
}
.ivu-row {
  display: inline-block !important;
}
.top_r span {
  display: inline-block;
  width: 70px;
  height: 32px;
  background: #6081ff;
  border-radius: 3px;
  color: #fff;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 6px;
}
.top_r span:last-child {
  background-color: white;
  color: #6081ff;
  border: 0.6px solid #6081ff;
  line-height: 30px;
}
</style>

